<template>
  <div class="container">
    <el-card class="box-card">
      <el-row class="top_title">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          class="fr"
          size="small"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </el-row>
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 100%"
                v-model="query.subjectID"
                placeholder="请选择"
                @change="getDirectorysList"
              >
                <el-option
                  v-for="(item, index) in subjects"
                  :key="index"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目录">
              <el-select
                style="width: 100%"
                v-model="query.catalogID"
                placeholder="请选择"
                @change="getTagsList"
              >
                <el-option
                  v-for="(item, index) in catalogs"
                  :key="index"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                style="width: 100%"
                v-model="query.tags"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in tags"
                  :key="index"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="query.keyword"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- =============================================================================== -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 100%"
                v-model="query.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                style="width: 100%"
                v-model="query.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                style="width: 100%"
                v-model="query.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                style="width: 100%"
                v-model="query.creatorID"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in creators"
                  :key="index"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--====================================================================================  -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="query.remarks"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="query.shortName"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                class="city-1"
                v-model="query.province"
                placeholder="请选择"
                @change="onProvinceChange"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>

              <el-select
                class="city-2"
                v-model="query.city"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" align="right">
            <el-button size="small" @click="clearAll">清除</el-button>
            <el-button size="small" type="primary" @click="getQuestionList">
              搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <!-- 顶部搜索表单 end -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 底部数据 -->
      <template>
        <el-table :data="questionList" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="180">
          </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间"> </el-table-column>
          <el-table-column label="难度">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                plain
                size="small"
                type="primary"
                icon="el-icon-view"
                circle
                @click="preview(scope.row)"
              ></el-button>
              <el-button
                plain
                size="small"
                type="success"
                icon="el-icon-edit"
                circle
                @click="$router.push('new')"
              ></el-button>
              <el-button
                plain
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeQuestion(scope.row)"
              ></el-button>
              <el-button
                plain
                size="small"
                type="warning"
                icon="el-icon-star-off"
                circle
                @click="choiceAdd(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- ================================================================================================= -->

      <!-- 分页功能 -->
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper, total"
        background
        :total="counts"
      >
      </el-pagination>
      <!-- 预览 -->
      <questions-preview
        :dialogVisible="dialogVisible"
        @close="dialogVisible = false"
        :questionItem="questionItem"
      ></questions-preview>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// 用户列表
import { list as usersList } from '@/api/base/users.js'
// 静态接口
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 目录接口
import { list as directorysList } from '@/api/hmmm/directorys'
// 学科接口
import { list as subjectsList } from '@/api/hmmm/subjects'
// 标签接口
import { list as tagsList } from '@/api/hmmm/tags' //eslint-disable-line
import { provinces, citys } from '@/api/hmmm/citys' //eslint-disable-line
import questionsPreview from '../components/questions-preview'
import { list as questionsList, detail, remove, choiceAdd } from '@/api/hmmm/questions' //eslint-disable-line
export default {
  components: {
    questionsPreview
  },
  created () {
    this.getQuestionList() // 内容列表
    this.getSubjectsList() // 学科列表
    // this.getDirectorysList() // 目录列表
    this.getUsersList() // 录入人列表
    this.getConstants()// 数据初始化
    // this.getTagsList()// 标签列表
    this.getCitysList()// 省市列表
  },
  data () {
    return {
      // 静态接口内容初始化
      difficulty: null,
      questionType: null,
      direction: null,
      // 标签
      tags: [],
      // 录入人
      creators: [],
      // 目录列表
      catalogs: [],
      // 学科列表
      subjects: [],
      // 列表详情
      questionItem: {},
      // 列表详情开关
      dialogVisible: false,
      // 分页功能
      counts: null,
      // 列表数据
      questionList: null,
      // 城市列表
      provinces: null,
      citys: null,
      // 查询信息
      query: {
        page: 1, // 1当前页数
        pagesize: 5, // 页尺寸
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签名称
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        province: null, // 企业所在地省份
        city: null // 企业所在城市

      }
    }
  },
  methods: {
    // 数据初始化
    getConstants () {
      this.difficulty = difficulty
      this.questionType = questionType
      this.direction = direction
    },
    // 省市列表
    async getCitysList () {
      try {
        const data = await provinces()
        // console.log(data)
        this.provinces = data
      } catch (error) { }
    },
    // 当市级发生变化时触发的函数
    onProvinceChange (val) {
      this.query.city = ''
      this.citys = citys(val)
      // console.log(citys(val))
      // console.log(val)
    },
    // 获取数据列表
    async getQuestionList () {
      try {
        const { data: res } = await questionsList(this.query)
        // console.log(res)
        res.items.forEach(item => {
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        this.counts = res.counts
        this.questionList = res.items
      } catch (err) {
      }
    },
    // 预览
    async preview (item) {
      // 显示对话框
      try {
        const { data: res } = await detail({ id: item.id })
        console.log(res)
        this.questionItem = res
        this.dialogVisible = true
      } catch (err) {
      }
    },
    // 当页码发生变化
    handleSizeChange (pagesize) {
      this.query.pagesize = pagesize
      // console.log(this.query.pagesize)
      this.getQuestionList()
    },

    // 当前页发生变化
    handleCurrentChange (page) {
      this.query.page = page
      // console.log(this.query.page)
      this.getQuestionList()
    },
    // 清除全部
    clearAll () {
      for (const key in this.query) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.query[key] = null
      }
      this.tags = this.catalogs = null
      // 更新题库列表
      this.getQuestionList()
    },
    // 添加收藏
    async choiceAdd (item) {
      const result = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      // 如果确确认就是加入精选 否则什么都不做
      if (result === 'confirm') {
        const data = await choiceAdd({
          id: item.id,
          choiceState: 1
        })
        console.log(data)
        this.getQuestionList()
        // 如果状态码是200表示加入精选
        if (data.status === 200) {
          return this.$message.success('加入精选成功')
        }
      }
    },
    // 移除题库
    async removeQuestion (item) {
      // 提示框
      const result = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果确认删除执行删除逻辑
      if (result === 'confirm') {
        const data = await remove(item)
        // console.log(data)
        this.getQuestionList()
        // 如果状态码是200表示删除成功
        if (data.status === 200) {
          return this.$message.success('删除成功')
        }
      }

      // this.$confirm('确认删除？')
      //   .then(async () => {
      //     const data = await remove(item)
      //     // console.log(res)
      //     if (data.status !== 200) return this.$message.error('删除失败')
      //     this.$message.success('删除成功')
      //     this.getQuestionList()
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     })
      //   })
    },
    // 获取学科列表
    async getSubjectsList () {
      try {
        const { data: res } = await subjectsList({ page: 1, pagesize: 100 })
        // console.log(res)
        this.subjects = res.items
      } catch (error) { }
    },

    // 由学科返回值获取目录列表
    async getDirectorysList (val) {
      try {
        this.query.catalogID = null
        const { data: res } = await directorysList({ subjectID: val })
        // console.log(res)
        this.catalogs = res.items
      } catch (error) { }
    },
    // 目录返回获取用户列表
    async getUsersList () {
      try {
        const { data: res } = await usersList({ page: 1, pagesize: 100 })
        // console.log(res)
        this.creators = res.list
      } catch (error) { }
    },
    // 获取标签列表
    async getTagsList () {
      try {
        this.query.tags = null
        const { data: res } = await tagsList({ subjectID: this.query.subjectID })
        // console.log(res)
        this.tags = res.items
      } catch (error) { }
    }
  }

}

</script>

<style scoped lang='scss'>
.el-card {
  margin: 10px;
  .top_title {
    height: 47px;
    span {
      font-size: 12px;
      color: pink;
    }
  }
  .el-col {
    height: 58px;
  }
}
.city-1 {
  width: 45%;
  margin-right: 5%;
}
.city-2 {
  width: 50%;
}
</style>
